<template>
  <div class="whole">
    <div :class="welComeTop">
      <div class="top_img">
        <img :src="imgUrl+userInfo.avatar?imgUrl+userInfo.avatar:userImg" alt="" />
      </div>
      <div class="top_brief">
        <span>{{ userInfo.userName }}</span>
        <span class="shu"></span>
        <span> 金牛区中医院 </span>
        <span> 骨科 </span>
        <span> {{ userInfo.nickName }} </span>
      </div>
    </div>
    <div class="surgery1">
      <div :class="center">
        <a-form>
          <a-input
            class="centerInp"
            v-model="centerInp"
            placeholder="请输入患者姓名、患者ID"
          />
          <div class="centerBut" @click="onSearch(centerInp)"></div>
        </a-form>
      </div>
      <div class="bottom">
        <div class="bottom_top">
          <span class="shu"></span>
          <span>最近的手术</span>
        </div>
        <div class="bottom_center">
          <div
            class="surgery"
            v-for="(item, index) in surgeryInfo"
            :key="index"
            @click="Details(item)"
          >
            <div class="surgery_er">
              <div class="surgery_er_one">
                <!-- <img v-if="!item.filePath" :src="img" alt="" /> -->
                <div v-if="!item.filePath" :class="surgery_er_one_img"></div>
                <img
                  v-if="item.filePath"
                  :src="imgUrl + item.filePath"
                  alt=""
                />
              </div>
              <div class="surgery_er_two">
                <div title="图片">
                  <div class="surgery_icon surgery_icon1"></div>
                  <span>{{ item.imageNum }}</span>
                </div>
                <div title="视频">
                  <div class="surgery_icon surgery_icon2"></div>
                  <span>{{ item.videoNum }}</span>
                </div>
                <div title="文档">
                  <div class="surgery_icon surgery_icon3"></div>
                  <span>{{ item.fileNum }}</span>
                </div>
                <div title="音频">
                  <div class="surgery_icon surgery_icon4"></div>
                  <span>{{ item.voiceNum }}</span>
                </div>
                <div title="报告">
                  <div class="surgery_icon surgery_icon5"></div>
                  <span>{{ item.reportNum }}</span>
                </div>
              </div>
            </div>
            <div class="surgery_san">
              <div class="surgery_san_one">
                <span>{{ item.patientName }}</span>
              </div>
              <div class="shu"></div>
              <div class="surgery_san_two">
                <div class="one">
                  编号
                  <span class="surgery_san_two_one">{{
                    item.operationCode
                  }}</span>
                  <span
                    v-if="item.operationType == 1"
                    class="surgery_san_two_two"
                    >E</span
                  >
                </div>
                <div class="two">
                  日期 <span>{{ item.operationDate }}</span>
                </div>
              </div>
              <!-- <div v-if="item.operationType == 1" class="surgery_san_three">E</div> -->
            </div>
          </div>
        </div>
        <div
          class="bottom_bottom"
          @click="showAll"
          v-if="surgeryInfo.length >= 4"
        >
          <span>显示全部</span>
          <div class="Jt"></div>
        </div>
      </div>
    </div>
    <br />
  </div>
</template>

<script>
import api from "../../api/operation/operation.js";
export default {
  data() {
    return {
      img: require("../../../images/home-showAll/bg-imgError.png"),
      img1: require("../../../images/home-showAll/bg-imgError1.png"),
      userImg: require("../../../images/home/doctor.png"),
      imgUrl: "",
      userInfo: {},
      centerInp: "",
      mouse: false,
      surgeryInfo: {},
      welComeTop:'top',
      menuLeft:'',
      menuLeft1:'',
      center:'center',
      surgery_er_one_img:'surgery_er_one_img',
    };
  },
  created(){

  },
  mounted() {
    let _this = this;
    _this.imgUrl = this.$config.imgUrl;
    _this.getUserInfo();
    _this.getSurgery();
    window.Event.$on('menuLeft', val => {
      _this.menuLeft = val;
      if(_this.menuLeft != 'menuDeaDolour') {
        _this.welComeTop = 'top'
        _this.surgery_er_one_img = 'surgery_er_one_img'
        _this.center = 'center'
      }else if(_this.menuLeft == 'menuDeaDolour'){
        _this.welComeTop = 'top1'
        _this.surgery_er_one_img = 'surgery_er_one_img1'
        _this.center = 'center1'
      }
    })
    // _this.menuLeft1 = _this.$store.state.menuLeft
    _this.menuLeft1 = sessionStorage.getItem('menuLeft')
    if(_this.menuLeft1 != 'menuDeaDolour') {
        _this.welComeTop = 'top'
        _this.surgery_er_one_img = 'surgery_er_one_img'
        _this.center = 'center'
      }else if(_this.menuLeft1 == 'menuDeaDolour'){
        _this.welComeTop = 'top1'
        _this.surgery_er_one_img = 'surgery_er_one_img1'
        _this.center = 'center1'
      }
  },

  methods: {
    Details(data) {
      this.$router.push({
        path: "/details",
        query: data,
      });
    },
    onSearch(value) {
      let obj = {
        data: "",
      };
      obj.data = value;
      let _this = this;
      _this.$router.push({
        path: "/showAll",
        query: obj,
      });
    },
    getUserInfo() {
      let _this = this;
      _this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'));
    },
    getSurgery() {
      let _this = this;
      api
        .operationGetList(null, { timeType: 0, type: 0, pageSize: 4 })
        .then((res) => {
          if (res.code == 200) {
            _this.surgeryInfo = res.data.data;
          }
        });
    },
    showAll() {
      this.$router.push("/showAll");
    },
  },
};
</script>

<style lang="scss" scoped>
.whole {
  width: 100%;
  display: flex;
  flex-direction: column;
  .top {
    margin-left: 30px;
    margin-top: 18px;
    width: 1560px;
    height: 280px;
    min-height: 280px;
    border-radius: 10px;
    box-shadow: 0px 0px 20px 0px rgba(0, 120, 182, 0.6);
    background-image: url(../../../images/home/bg-top-center.png);
    background-size: cover;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    .top_img {
      width: 118px;
      height: 118px;
      min-width: 118px;
      min-height: 118px;
      border-radius: 50%;
      margin: 0 48px 0 91px;
      img {
        border-radius: 50%;
        width: 100%;
        height: 100%;
      }
    }
    .top_brief {
      color: #ffffff;
      font-weight: normal;
      font-stretch: normal;
      font-family: MicrosoftYaHei-Bold;
      line-height: 50px;
      span:nth-child(1) {
        font-size: 26px;
      }
      span {
        font-size: 16px;
      }
      .shu {
        width: 4px;
        height: 21px;
        border: solid 1px #ffffff;
        margin: 0 18px 0 21px;
      }
    }
  }
  .top1 {
    margin-left: 30px;
    margin-top: 18px;
    width: 1560px;
    height: 280px;
    min-height: 280px;
    border-radius: 10px;
    box-shadow: 0px 0px 20px 0px rgba(0, 120, 182, 0.6);
    background-image: url(../../../images/home-dark/bg-top-center.png);
    background-size: cover;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    .top_img {
      width: 118px;
      height: 118px;
      min-width: 118px;
      min-height: 118px;
      border-radius: 50%;
      margin: 0 48px 0 91px;
      img {
        border-radius: 50%;
        width: 100%;
        height: 100%;
      }
    }
    .top_brief {
      color: #ffffff;
      font-weight: normal;
      font-stretch: normal;
      font-family: MicrosoftYaHei-Bold;
      line-height: 50px;
      span:nth-child(1) {
        font-size: 26px;
      }
      span {
        font-size: 16px;
      }
      .shu {
        width: 4px;
        height: 21px;
        border: solid 1px #ffffff;
        margin: 0 18px 0 21px;
      }
    }
  }
  .surgery1 {
    width: 84%;
    height: 580px;
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    .center1 {
      background-color: #ddd7d7;
      width: 540px;
      height: 36px;
      min-height: 36px;
      border-radius: 18px;
      border: solid 1px #9d9d9d;
      position: relative;
      .centerInp {
        position: absolute;
        left: 0;
        width: 93%;
        border: none;
        border-style: none;
        background: none;
        box-shadow: none;
        border-radius: 18px;
        padding-left: 21px;
      }
      .centerBut {
        width: 18px;
        height: 18px;
        position: absolute;
        right: 19px;
        top: 8px;
        background-image: url(../../../images/home/icon-search.png);
        background-size: cover;
        background-size: 100% 100%;
      }
    }
    .center {
      width: 540px;
      height: 36px;
      min-height: 36px;
      border-radius: 18px;
      border: solid 1px #9d9d9d;
      position: relative;
      .centerInp {
        position: absolute;
        left: 0;
        width: 93%;
        border: none;
        border-style: none;
        background: none;
        box-shadow: none;
        border-radius: 18px;
        padding-left: 21px;
      }
      .centerBut {
        width: 18px;
        height: 18px;
        position: absolute;
        right: 19px;
        top: 8px;
        background-image: url(../../../images/home/icon-search.png);
        background-size: cover;
        background-size: 100% 100%;
      }
    }
    .bottom {
      width: 100%;
      height: 500px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .bottom_top {
        display: flex;
        align-items: center;
        margin-left: 30px;
        .shu {
          width: 3px;
          height: 16px;
          background-color: #0078b6;
          border-radius: 2px;
          margin-right: 14px;
        }
        span {
          font-family: MicrosoftYaHei;
          font-size: 18px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #494949;
        }
      }
      .bottom_center {
        width: 100%;
        display: flex;
        margin-left: 30px;
        .surgery {
          width: 367px;
          height: 400px;
          border-radius: 10px;
          margin-right: 31px;
          cursor: pointer;
          position: relative;
          .surgery_er {
            width: 367px;
            height: 340px;
            border-radius: 10px 10px 0px 0px;
            position: relative;
            .surgery_er_one {
              height: 100%;
              width: 100%;
              border-radius: 10px 10px 0px 0px;
              overflow-x: hidden;
              display: flex;
              align-items: center;
              justify-content: center;
              img {
                //border-radius: 10px 10px 0px 0px;
                //max-width: 100%;
                height: 100%;
              }
              .surgery_er_one_img {
                border-radius: 10px 10px 0px 0px;
                width: 100%;
                height: 100%;
                background-image: url(../../../images/home-showAll/bg-imgError.png);
                background-size: cover;
                background-size: 100% 100%;
              }
              .surgery_er_one_img1 {
                border-radius: 10px 10px 0px 0px;
                width: 100%;
                height: 100%;
                background-image: url(../../../images/home-showAll/bg-imgError1.png);
                background-size: cover;
                background-size: 100% 100%;
              }
            }
            .surgery_er_two {
              position: absolute;
              display: flex;
              justify-content: space-around;
              align-items: center;
              top: 0;
              font-family: MicrosoftYaHei;
              font-size: 16px;
              font-weight: normal;
              font-stretch: normal;
              color: #ffffff;
              width: 100%;
              height: 30px;
              background-color: #343f4b;
              border-radius: 10px 10px 0px 0px;
              opacity: 0.7;
              div {
                display: flex;
                align-items: center;
                .surgery_icon {
                  width: 24px;
                  height: 20px;
                }
                .surgery_icon1 {
                  background-image: url(../../../images/home/icon-image.png);
                  background-size: cover;
                  background-size: 100% 100%;
                }
                .surgery_icon2 {
                  background-image: url(../../../images/home/icon-video.png);
                  background-size: cover;
                  background-size: 100% 100%;
                }
                .surgery_icon3 {
                  background-image: url(../../../images/home/icon-file.png);
                  background-size: cover;
                  background-size: 100% 100%;
                }
                .surgery_icon4 {
                  background-image: url(../../../images/home/icon-audio.png);
                  background-size: cover;
                  background-size: 100% 100%;
                }
                .surgery_icon5 {
                  background-image: url(../../../images/home/icon-report.png);
                  background-size: cover;
                  background-size: 100% 100%;
                }
                span {
                  margin-left: 10px;
                }
              }
            }
          }
          .surgery_san {
            position: absolute;
            bottom: 0;
            display: flex;
            align-items: center;
            width: 100%;
            height: 60px;
            background-color: #fff;
            border-radius: 0px 0px 10px 10px;
            .surgery_san_one {
              width: 126px;
              height: 60px;
              font-family: MicrosoftYaHei-Bold;
              font-size: 20px;
              font-weight: normal;
              font-stretch: normal;
              color: #494949;
              display: flex;
              justify-content: center;
              align-items: center;
            }
            .surgery_san_two {
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: flex-start;
              width: 237px;
              height: 60px;
              font-family: MicrosoftYaHei;
              font-size: 14px;
              font-weight: normal;
              font-stretch: normal;
              color: #494949;
              .one {
                margin-left: 15px;
                color: #747474;
                position: relative;
                .surgery_san_two_one {
                  margin-left: 10px;
                  color: #494949;
                }
                .surgery_san_two_two {
                  font-size: 20px;
                  font-weight: bold;
                  color: #ff0000;
                  position: absolute;
                  bottom: -2px;
                  right: -30px;
                }
              }
              .two {
                margin-left: 15px;
                color: #747474;
                span {
                  margin-left: 10px;
                  color: #494949;
                }
              }
            }
            .shu {
              width: 4px;
              height: 32px;
              border-right: solid 1px #b2b2b2;
            }
          }
        }
        .surgery:hover {
          box-shadow: 0px 0px 20px 0px rgba(0, 120, 182, 0.6);
        }
      }
      .bottom_bottom {
        width: 100%;
        z-index: 10;
        //transform: translateX(-44px);
        font-family: MicrosoftYaHei;
        font-size: 18px;
        font-weight: normal;
        font-stretch: normal;
        color: #1e7eff;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        width: 88px;
        margin: 0 auto;
        .Jt {
          width: 10px;
          height: 10px;
          border-top: 1px solid #1e7eff;
          border-right: 1px solid #1e7eff;
          transform: rotate(45deg);
        }
      }
    }
  }
}
</style>
